import QtQuick 2.12

Item {
    id:_item
    implicitHeight: 36
    implicitWidth: _item.defaultWidth()


    property alias text: _text.text
    property alias font: _text.font
    property alias radius: _rectangleBackground.radius
    property alias picWidth: _image.width
    property alias picHeight: _image.height
    property alias picSource: _image.source
    property int spacing: 6
    property int leftSpacing: 20
    property int rightSpacing: 20

    property var picNormal
    property var picHover
    property var picPress
    property var picDisable

    property color colorTextNormal:"#8026344C"
    property color colorTextHover:"#CC26344C"
    property color colorTextPress:"#FF26344C"
    property color colorTextDisable:"#4D26344C"

    property color colorBackgroundNormal: "transparent"
    property color colorBackgroundHover:"#1A466392"
    property color colorBackgroundPress:"#29466392"
    property color colorBackgroundDisable:"transparent"

    function defaultWidth(){
        return _itemConent.width + _item.leftSpacing + _item.rightSpacing
    }

    signal clicked()

    Rectangle{
        id:_rectangleBackground
        anchors.fill: parent
        color: colorBackgroundNormal
        radius: _rectangleBackground.radius
        Item {
            id:_itemConent
            anchors.centerIn: parent
            width: {
                return _image.width + spacing + _text.contentWidth
            }
            Image{
                id:_image
                width: 24
                height: 24
                source: enabled?picNormal:picDisable
                anchors.verticalCenter: parent.verticalCenter
                mipmap: true
                fillMode:Image.PreserveAspectFit
            }

            Text {
                id:_text
                anchors.left: _image.right
                anchors.leftMargin: spacing
                color: enabled?colorTextNormal:colorTextDisable
                font.pixelSize: 14
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }

    MouseArea{
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        hoverEnabled: true

        onClicked: {
            _item.clicked()
        }

        onPressed: {
            _rectangleBackground.color = colorBackgroundPress
            _text.color = colorTextPress
            _image.source = picPress
//            console.log("onPressed",_image.source)
        }

        onEntered:{
            _rectangleBackground.color = colorBackgroundHover
            _text.color = colorTextHover
            _image.source = picHover
//            console.log("onEntered",_image.source)
        }

        onExited: {
            _rectangleBackground.color = colorBackgroundNormal
            _text.color = colorTextNormal
            _image.source = picNormal
//            console.log("onExited",_image.source)
        }
    }

}
